<template>
  <svg class="svg-icon" aria-hidden="true" :style="myStyle">
    <use :xlink:href="`#${name}`"></use>
  </svg>
</template>
<script>
  require('./iconfont.js')
  export default {
    props: {
      name: {
        type: String,
        default: '',
        required: true
      },
      size: {
        type: String,
        default: ''
      },
      color: {
        type: String,
        default: ''
      }
    },
    data () {
      return {}
    },
    computed: {
      myStyle () {
        let style = {}
        if (this.size) {
          style['width'] = this.size
          style['height'] = this.size
        }
        if (this.color) {
          style['fill'] = this.color
        }
        return style
      }
    }
  }
</script>
<style scoped>
  .svg-icon {
    display: inline-block;
    width: 20px;
    height: 20px;
    vertical-align: middle;
    stroke: currentColor;
    fill: #666
  }

  .svg-fill {
    fill: currentColor;
    stroke: none;
  }

  .svg-up {
    transform: rotate(0deg);
  }

  .svg-right {
    transform: rotate(90deg);
  }

  .svg-down {
    transform: rotate(180deg);
  }

  .svg-left {
    transform: rotate(-90deg);
  }
</style>
